<template>
	<div class="numberBox">
		<!-- <u-number-box v-model="modelValue" :min="min" :max="max" :step="step" :input-width="100" :input-height="60" :disabled="disabled" :positive-integer="positiveInteger" @plus="plusFn" @minus="minusFn" @change="changNumber" @blur="blurFn"></u-number-box> -->
		<div class="number" v-if="position == ''">
			<div class="minus" @click="minusNumber(step)">-</div>
			<div class="input">
				<!-- <u-input v-model="modelValue" input-align="center" placeholder="" :clearable="false" type="digit" :border="false" /> -->
				<input class="uni-input" :border="false" v-model="modelValue" type="digit" placeholder="" @blur="blur" :disabled="disabled" />
			</div>
			<div class="plus" @click="plusNumber(step)">+</div>
		</div>
		<div class="number" v-else>
			<div class="input">
				<!-- <u-input v-model="modelValue" input-align="center" placeholder="" :clearable="false" type="digit" :border="false" /> -->
				<input class="uni-input" :border="false" v-model="modelValue" type="digit" placeholder="" @blur="blur" :disabled="disabled" />
			</div>
			<div style="display: flex; flex-direction: column; gap: 10rpx">
				<div class="plusRight" @click="plusNumber(step)">+</div>
				<div class="minusRiht" @click="minusNumber(step)">-</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "vNumberBox",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [Number, String],
			default: null,
		},
		min: {
			type: Number,
		},
		max: {
			type: Number,
		},
		step: {
			type: Number,
			default: 1,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		// 严格模式，开启后只能输入 step 的倍数
		strictly: {
			type: Boolean,
			default: false,
		},
		// 精度，小数点后位数
		precision: {
			type: Number,
			default: 0,
		},
		placeholder: {
			type: String,
			default: "",
		},
		position: {
			type: String,
			default: "",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},

	data() {
		return {
			positiveInteger: true, //默认true
		}
	},

	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
	},

	methods: {
		strictlyFn(val) {
			// 严格模式，开启后只能输入 step 的倍数
			if (val % this.step === 0) {
				console.log("ok")
				return this.$emit("update:value", val)
			} else {
				// todo
				console.log("no%")
				let num = val - (val % this.step)
				// console.log(num, "num")
				this.$emit("update:value", num)
			}
		},
		plusFn(e) {
			if (this.readonly) return
			this.positiveIntegerFn()
			this.$emit("update:value", e.value)
		},
		minusFn(e) {
			if (this.readonly) return
			this.positiveIntegerFn()
			this.$emit("update:value", e.value)
		},
		changNumber(e) {
			if (this.readonly) return
			this.positiveIntegerFn()
			this.$emit("update:value", e.value)
		},
		positiveIntegerFn() {
			if (!Number.isInteger(this.step)) {
				this.positiveInteger = false
			}
		},
		blurFn(e) {
			if (this.strictly) {
				if (e.value % this.step === 0) {
					this.$emit("update:value", e.value)
				} else {
					console.log(e.value - (e.value % this.step), "num")
					this.$emit("update:value", e.value - (e.value % this.step))
				}
			} else {
				this.$emit("update:value", e.value)
			}
		},
		minusNumber(step) {
			if (this.disabled || this.readonly) return
			if (this.modelValue === "" || this.modelValue === null) {
				this.$emit("update:value", 0)
			}
			let num = this.modelValue - step
			if (typeof this.modelValue === "string") {
				num = Number(this.modelValue) - step
				if (num < this.min) {
					num = this.min
				}
				console.log(num, "num")
				this.$emit("update:value", num)
			} else {
				this.$emit("update:value", num)
			}
		},
		plusNumber(step) {
			if (this.disabled || this.readonly) return
			if (this.modelValue === "" || this.modelValue === null) {
				this.$emit("update:value", 0)
			}
			let num = this.modelValue + step
			if (typeof this.modelValue === "string") {
				num = Number(this.modelValue) + step
				if (num > this.max) {
					num = this.max
				}
				// console.log(num, "num")
				this.$emit("update:value", num)
			} else {
				this.$emit("update:value", num)
			}
		},
		blur() {
			if (this.modelValue === "") {
				this.$emit("update:value", 0)
			}
			if (this.modelValue < this.min) {
				this.$emit("update:value", this.min)
			}
			if (this.modelValue > this.max) {
				this.$emit("update:value", this.max)
			}
			if (this.strictly) {
				if (this.modelValue % this.step === 0) {
					this.$emit("update:value", this.modelValue)
				} else {
					// console.log(this.modelValue - (this.modelValue % this.step), "num")
					this.$emit("update:value", this.modelValue - (this.modelValue % this.step))
				}
			} else {
				this.$emit("update:value", this.modelValue)
			}
		},
	},
	watch: {
		modelValue: {
			deep: true,
			immediate: true,
			handler(val) {
				if (typeof val === "string") {
					val = Number(val)
					this.modelValue = val
				}
				if (this.precision > 0) {
					// console.log(typeof val, "typeof val")
					this.modelValue = val.toFixed(this.precision)
					this.$emit("update:value", val.toFixed(this.precision))
				}
				if (val > this.max) {
					this.$emit("update:value", this.max)
				}
				if (val < this.min) {
					this.$emit("update:value", this.min)
				}
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.number {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
	.minus {
		width: 60rpx;
		height: 60rpx;
		background-color: #fff;
		border: 1px solid #007aff;
		border-radius: 15rpx;
		text-align: center;
		line-height: 60rpx;
		color: #007aff;
	}
	.input {
		width: 100rpx;
		height: 60rpx;
		background-color: #f6f6f6;
		border-radius: 15rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
	}
	.plus {
		width: 60rpx;
		height: 60rpx;
		background-color: #007aff;
		border: 1px solid #007aff;
		border-radius: 15rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
	}
	.minusRiht {
		width: 60rpx;
		height: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border: 1px solid #007aff;
		border-radius: 10rpx;
		text-align: center;
		color: #007aff;
	}
	.plusRight {
		width: 60rpx;
		height: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007aff;
		border: 1px solid #007aff;
		border-radius: 10rpx;
		text-align: center;
		line-height: 25rpx;
		color: #fff;
	}
}
</style>
